<template>
	<div class="bear-BarChart">
		<SizeObserver
				class="bear-container"
				@bear-resize="$_bear_resizeFn">
			<div ref="chart" class="bear-chart"></div>
		</SizeObserver>
	</div>
</template>

<script>
	// eslint-disable-next-line no-unused-vars
	/* global utils echarts */
	/**
	 * @author 唐国雄
	 * 柱状图
	 * 属性----------------------
	 * :renderer		渲染方式,'svg','canvas'
	 * :name-attr		名称字段
	 * :value-attr		值字段
	 * :stack-attr		堆叠字段
	 * :main-color		颜色序列
	 * :bar-width		柱条宽度
	 * :formatter		格式化器,(<String>)=>{return <String>;}
	 * :extend-tipper	扩展提示生成器,(cur,all)=>{return [{name:<String>,value:<String>},...]}
	 * :data			数据,[{name:<String>,value:[<Number>,...],stack:<String>},...]
	 * :x-axis			x轴分类名,[<String>,...]
	 * :x-percent		单个系列横向的百分占比名称
	 * :y-percent		系列间纵向的百分占比名称
	 * :axis-name		纵轴名称
	 * :axis-formatter	纵轴刻度格式化器,(<String>)=>{return <String>;}
	 * :min-interval	纵轴最小间隔
	 * :font-size		报表字体大小
	 * :data-zoom		是否启用缩放组件
	 * :simple			没有纵轴,没有图例
	 * :flip			翻转横纵轴
	 * :label			柱子旁边是否显示标签
	 * :label-min-width	标签最小宽度
	 * 事件----------------------
	 * @click-chart		点击报表
	 * 方法----------------------
	 * loadChart()		重加载报表
	 * resetOption()	重设选项
	 */
	import './chart/chart.scss';
	import {chartMixin,yAxisChartMixin} from './chart/chart';
	export default{
		name:'BarChart',
		mixins:[chartMixin,yAxisChartMixin],
		props:{
			mainColor:{
				type:Array,
				default(){
					return [
						'#519bf7',
						'#4cd435',
						'#f87676',
						'#b9aefc',
						'#ebe53a'
					];
				}
			},
			barWidth:{
				type:Number,
				default:28
			},
			// 默认启用缩放组件
			dataZoom:{
				type:Boolean,
				default:true
			},
			simple:Boolean,
			flip:Boolean,
			label:Boolean,
			labelMinWidth:Number
		},
		computed:{
			$_bear_resetOptionListener(){
				return [this.mainColor,this.tipFormatterFn,this.mainColor,this.xAxis,this.axisName,this.axisFormatter,this.minInterval,this.fontSize,this.dataZoom];
			},
			$_bear_loadChartListener(){
				return [this.nameAttr,this.valueAttr,this.stackAttr,this.barWidth,this.simple,this.flip];
			}
		},
		created(){
			this.redundance=this.fontSize+10+10+5;
		},
		methods:{
			// 重加载报表
			$_bear_loadChart(){
				const label=this.label;
				const flip=this.flip;
				this.oldChartData={};
				const barWidth=this.barWidth;
				let count=0;
				const container={};
				this.oldChartData.series=this.$_bear_series(function(ele){
					ele.type='bar';
					ele.barWidth=barWidth;
					ele.barGap=0;
					ele.large=true;
					const stack=ele.stack;
					if(stack){
						if(!container[stack]){
							container[stack]=1;
							++count;
						}
					}else{
						++count;
					}
					if(label){
						ele.label={
							show:true,
							position:flip?'right':'top'
						};
					}
					return ele;
				});
				this.oldChartData.maxValueSpan=Math.max(
					Math.floor((flip?this.lastHeight-25:this.lastWidth)/Math.max(barWidth*count+20,this.labelMinWidth||0))-1,
					0
				);
				this.resetOption();
			},
			// 重设选项
			$_bear_resetOption(){
				const fontSize=this.fontSize;
				const simple=this.simple;
				const flip=this.flip;
				const option={
					color:this.mainColor,
					legend:{
						show:!simple,
						top:0,
						right:0,
						itemHeight:fontSize,
						textStyle:{
							color:'#000',
							fontSize:fontSize,
							// fontWeight:'bold',
							lineHeight:fontSize+10
						}
					},
					tooltip:{
						trigger:'axis',
						axisPointer:{
							type:'shadow'
						},
						appendToBody:true,
						position:this.$_bear_tipPositionFn,
						formatter:this.tipFormatterFn
					},
					grid:{left:0,right:0,top:fontSize+10+10,bottom:5,containLabel:true},
					[flip?'yAxis':'xAxis']:{
						type:'category',
						data:this.xAxis,
						axisTick:{
							alignWithLabel:true
						},
						axisLabel:{
							interval:0,
							// fontWeight:'bold',
							fontSize:fontSize
						}
					},
					[flip?'xAxis':'yAxis']:{
						show:!simple,
						name:this.axisName,
						nameTextStyle:{
							fontSize:fontSize,
							fontWeight:'bold',
							lineHeight:fontSize+10
						},
						nameGap:10,
						boundaryGap:['15%','15%'],
						min:0,
						splitNumber:this.splitNumber,
						minInterval:this.minInterval,
						axisLine:{
							symbol:['none','arrow'],
							symbolOffset:10
						},
						axisLabel:{
							formatter:this.axisFormatter||this.formatter,
							showMinLabel:false,
							showMaxLabel:false,
							fontSize:fontSize
						},
						splitLine:{
							lineStyle:{
								type:'dashed'
							}
						}
					},
					series:this.oldChartData.series
				};
				if(this.dataZoom){
					const maxCount=this.oldChartData.series.reduce(function(a,b){
						return Math.max(a,b.data.length);
					},0);
					if(!flip||maxCount>this.oldChartData.maxValueSpan){
						option.dataZoom=[
							{
								type:'slider',
								labelFormatter:'',
								filterMode:'none',
								minValueSpan:1,
								maxValueSpan:this.oldChartData.maxValueSpan
							},{
								type:'inside'
							}
						];
						if(flip){
							option.dataZoom[0].orient='vertical';
							option.dataZoom[1].orient='vertical';
							option.dataZoom[0].right=0;
						}else{
							option.dataZoom[0].height=26;
							option.dataZoom[0].bottom=0;
							option.dataZoom[0].orient='horizontal';
							option.dataZoom[1].orient='horizontal';
						}
					}
				}
				this.chart.setOption(option,true);
			}
		}
	};
</script>

<style lang="scss">
	.bear-BarChart{
		>.bear-container{
			position:relative;
			width:100%;
			height:100%;
			>.bear-chart{
				width:100%;
				height:100%;
			}
		}
	}
</style>
